<template>
  <div>
    <el-row class="normal">
      <div class="btn-refresh">
        <el-button @click="reGet" size="mini"> 重新获取 </el-button>
      </div>
      <el-col :span="4">
        <div
          v-for="item in listArry"
          :key="item.id"
          :class="[item.id === activeId ? activeClass : '', normalClass]"
          @click="getInfo(item.id)"
        >
          历史报告:{{ item.reportTime }}
        </div>
      </el-col>
      <el-col :span="20">
        <div class="a4">
          <el-row>
            <el-col :span="6" class="heiti">姓名:{{ infoData.name }} </el-col>
            <el-col :span="6" class="heiti"
              >性别:{{ infoData.sexName }}
            </el-col>
            <el-col :span="6" class="heiti">年龄:{{ infoData.age }} </el-col>
            <el-col :span="6" class="heiti"
              >身份证:{{ infoData.cardId }}
            </el-col>
            <el-col :span="6" class="heiti"
              >门诊号:{{ infoData.patientNo }}
            </el-col>
            <el-col :span="6" class="heiti"
              >住院号:{{ infoData.hospitalizedNo }}
            </el-col>
            <el-col :span="6" class="heiti"
              >病区:{{ infoData.wardName }}
            </el-col>
            <el-col :span="6" class="heiti">床号:{{ infoData.bedId }} </el-col>
            <el-col :span="6" class="heiti"
              >病理号:{{ infoData.pathologyId }}
            </el-col>
            <el-col :span="6" class="heiti"
              >检查类型:{{ infoData.checkCategoryName }}
            </el-col>
            <el-col :span="6" class="heiti"
              >患者类别:{{ infoData.patientCategoryName }}
            </el-col>
            <el-col :span="6" class="heiti"
              >诊断组:{{ infoData.subspecialtyTypeName }}
            </el-col>
            <el-col :span="6" class="heiti"
              >标本类别:{{ infoData.specimenTypeName }}
            </el-col>

            <el-col :span="6" class="heiti"
              >送检科室:{{ infoData.sendDepartment }}
            </el-col>
            <el-col :span="6" class="heiti"
              >送检医生:{{ infoData.sendDoctor }}
            </el-col>
            <el-col :span="6" class="heiti"
              >报告状态:{{ infoData.reportStatus }}
            </el-col>
            <el-col :span="12" class="heiti"
              >报告医生：:{{ infoData.jobName }}
            </el-col>
            <el-col :span="12" class="heiti"
              >报告时间：:{{ infoData.reportTime }}
            </el-col>
            <el-col :span="12" class="heiti"
              >取材部位:{{ infoData.sampleBody }}
            </el-col>
          </el-row>

          <el-row>
            <div v-if="reportTemplateReady" class="container-narrow">
              <grid-layout
                id="custom-report"
                :layout.sync="componentList"
                :col-num="reportTemplateCol"
                :row-height="28"
                :is-draggable="false"
                :is-resizable="false"
                :is-mirrored="false"
                :vertical-compact="true"
                :use-css-transforms="true"
              >
                <grid-item
                  v-for="(item, index) in componentList"
                  :x="item.x"
                  :y="item.y"
                  :w="item.w"
                  :h="item.h"
                  :i="item.i"
                  :key="index"
                >
                  <el-row
                    v-if="item.smallType === 'space'"
                    class="row-in-grid-item"
                  ></el-row>

                  <hr v-else-if="item.smallType === 'hr'" />

                  <el-row
                    v-else-if="item.smallType === 'text'"
                    class="row-in-grid-item"
                  >
                    <span
                      :style="styleString(item.styleJson)"
                      @click="aiValueToAssign(item.stringContent)"
                    >
                      {{ item.stringContent }}
                    </span>
                  </el-row>

                  <el-row
                    v-else-if="item.smallType === 'input'"
                    class="row-in-grid-item"
                  >
                    <div :id="item.i" style="width: 100%; height: 100%">
                      <el-input
                        v-if="item.isInputArea"
                        type="textarea"
                        v-model="detailForm[item.i]"
                        :autosize="{
                          minRows: 1,
                          maxRows: parseInt((item.h * 5) / 3, 10),
                        }"
                        :placeholder="item.placeholder"
                        :style="styleString(item.styleJson)"
                        :disabled="!isThisOpinionTab || isFinished"
                        size="mini"
                      >
                      </el-input>
                      <el-input
                        v-else
                        v-model="detailForm[item.i]"
                        :placeholder="item.placeholder"
                        :style="styleString(item.styleJson)"
                        :disabled="!isThisOpinionTab || isFinished"
                        size="mini"
                      >
                      </el-input>
                    </div>
                  </el-row>

                  <el-row
                    v-else-if="item.smallType === 'selection'"
                    class="row-in-grid-item"
                  >
                    <div :id="item.i" style="width: 100%; height: 100%">
                      <el-select
                        v-model="detailForm[item.i]"
                        :placeholder="item.placeholder"
                        :style="styleString(item.styleJson)"
                        :disabled="!isThisOpinionTab || isFinished"
                        size="mini"
                        clearable
                      >
                        <el-option
                          v-for="(t, index) in item.selectDataJson"
                          :key="index"
                          :label="t"
                          :value="t"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </el-row>

                  <el-row
                    v-else-if="item.smallType === 'special'"
                    class="row-in-grid-item"
                  >
                    <!--病理图像判断-->
                    <div
                      v-if="item.i === 'special_normal_pathologyFiles'"
                      style="width: 100%; height: 100%"
                    >
                      <span style="float: left">{{ item.stringContent }}</span>
                    </div>
                    <!--签名图像-->
                    <div v-else-if="item.i === 'special_base_reportDoctor'">
                      <span>{{ item.stringContent }}</span>
                    </div>
                    <!--特殊检查-导入-->
                    <div
                      v-else-if="item.i === 'special_normal_import'"
                      style="margin-left: 10px"
                    >
                      <el-button
                        size="mini"
                        type="text"
                        @click="detailSpecialCheckImport"
                      >
                        {{ item.stringContent }}
                      </el-button>
                    </div>
                    <div
                      v-else-if="item.i === 'special_clearable_microFingings'"
                      style="margin-left: 10px"
                    >
                      <el-button
                        size="mini"
                        type="text"
                        :disabled="!isThisOpinionTab || isFinished"
                        @click="detailMicroFingingsClear"
                      >
                        {{ item.stringContent }}
                      </el-button>
                    </div>
                    <div
                      v-else-if="item.i === 'special_clearable_specialCheck'"
                      style="margin-left: 10px"
                    >
                      <el-button
                        size="mini"
                        type="text"
                        :disabled="!isThisOpinionTab || isFinished"
                        @click="detailSpecialCheckClear"
                      >
                        {{ item.stringContent }}
                      </el-button>
                    </div>
                    <div
                      v-else-if="item.i === 'special_clearable_diagnose'"
                      style="margin-left: 10px"
                    >
                      <el-button
                        size="mini"
                        type="text"
                        :disabled="!isThisOpinionTab || isFinished"
                        @click="detailDiagnoseClear"
                      >
                        {{ item.stringContent }}
                      </el-button>
                    </div>
                  </el-row>
                </grid-item>
              </grid-layout>
            </div>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import diagnosisDefaultBase from '@templates/diagnosisDefault';
const diagnosisDefault = _.clone(diagnosisDefaultBase);
export default {
  name: 'DiagnosisDetailhistoricalReport',
  props: {
    diagnosis: {
      type: Object,
      default: diagnosisDefault,
    },
    listArry: {
      type: Array,
    },
  },
  data() {
    return {
      activeClass: 'is-active',
      normalClass: 'btn-item',
      activeId: 1,

      infoData: {
        pathologyId: '', //患者病理号
        checkCategoryName: '', //患者对应的检查类型字典ID名称
        jobName: '', //报告医生名称(医生工号)
        reportStatus: '', //报告状态
        reportTime: '', //报告时间
        name: '', //患者姓名
        sexName: '', //患者性别字典ID名称
        age: null, //患者年龄
        cardId: '', //患者身份证号
        hospitalizedNo: ' ', //患者住院号
        patientNo: '', //患者门诊号
        sendDepartment: '', //送检科室
        sendDoctor: '', //送检医生
        wardName: ' ', //病区名称
        subspecialtyTypeName: '', //诊断组ID的名称
        patientCategoryName: '', //患者类别字典ID名称
        bedId: ' ', //病床号
        specimenTypeName: '', //标本类别字典ID名称
        sampleBody: '', //取材部位
      },
      reportTemplateReady: false,
      // 意见数据表单
      detailForm: {},
      // 意见数据缓存
      detailCache: {},
      // 模板组件列表
      componentList: [],
      reportTemplateCol: 12,
    };
  },
  computed: {},
  mounted() {
    if (this.listArry.length > 0) {
      this.getInfo(this.listArry[0].id);
    }
  },
  methods: {
    getInfo(id) {
      this.activeId = id;
      this.$axios({
        method: 'GET',
        url: `/PROXY-Remote/historyReport/get/by/${id}`,
      }).then((res) => {
        if (res.data.code === 200) {
          this.infoData = res.data.data;
          //根据每条历史记录判断所用报告模板
          this.reportTemplateRequest();
        }
      });
    },
    reGet() {
      const pathologyId = sessionStorage.getItem('pathologyId');
      this.$axios({
        method: 'GET',
        url: `/PROXY-Remote/historyReport/againCreateAsyncTask/forHistoryReportOfCancerHospital/by/${pathologyId}`,
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message.success('重新获取成功');
        }
      });
    },

    // 报告模板获取
    async reportTemplateRequest() {
      this.reportTemplateReady = false;
      const res = await this.$axios({
        method: 'GET',
        url: '/PROXY-Remote/report-templates/check-category',
        params: {
          checkCategory: this.infoData.checkCategory,
        },
      });

      if (res && res.data.code === 200) {
        const result = res.data.data;
        this.reportTemplateCol = _.get(result, 'settingsColNum', 12);
        this.componentList = [];
        this.detailForm = _.clone({});
        this.detailCache = _.clone({});

        let detailJson = JSON.parse(this.infoData.detailString);

        let tableArry = [
          'selection_table_01',
          'selection_table_02',
          'selection_table_03',
          'selection_table_04',
          'selection_table_05',
          'selection_table_06',
        ];
        tableArry.forEach((item) => {
          if (!detailJson['selection_table_01']) {
            detailJson['selection_table_01'] = '胃窦';
          } else if (!detailJson['selection_table_02']) {
            detailJson['selection_table_02'] = '胃角';
          } else if (!detailJson['selection_table_03']) {
            detailJson['selection_table_03'] = '胃体大弯';
          } else if (!detailJson['selection_table_04']) {
            detailJson['selection_table_04'] = '胃体小弯';
          } else if (!detailJson['selection_table_05']) {
            detailJson['selection_table_05'] = '贲门';
          } else if (!detailJson['selection_table_06']) {
            detailJson['selection_table_06'] = '胃底';
          }
        });

        // 加载数据到表单缓存
        result.reportTemplateComponents.forEach((t, index) => {
          // 忽略基本信息项
          if (t.bigType === 'base') {
            return;
          }

          // 为可输入项设置初始值
          if (t.smallType === 'input' || t.smallType === 'selection') {
            this.detailCache[t.i] = '';
          }

          const item = t;
          item.index = index;
          this.componentList.push(item);
        });
        Object.keys(this.detailCache).forEach((key) => {
          this.detailCache[key] = _.get(detailJson, key, '');
        });
        // 初始化填写表单的 setter 和 getter
        this.detailForm = _.clone(this.detailCache);
      }
      this.reportTemplateReady = true;
    },
    // 报告模板组件样式
    styleString(styleJson) {
      let style = 'width: 100%; word-break:break-all;';
      Object.keys(styleJson).forEach((key) => {
        style += `${key}:${styleJson[key]};`;
      });
      return style;
    },
  },
};
</script>
<style scoped>
.normal {
  padding: 10px;
  font-size: 14px;
  color: #606266;
}
.btn-item {
  cursor: pointer;
  line-height: 28px;
  padding-left: 10px;
  border-radius: 2px;
}

.is-active {
  color: #ffffff;
  background-color: #10a1df;
}
.cut-line {
  width: 100%;
  border-bottom: 1px solid #000;
}
.a4 {
  width: 802px;
  height: 100%;
  margin: 0 auto;
  border: 1px solid #000;
  padding: 20px;
}
.second-title {
  text-align: center;
  font-size: 16px;
}

.heiti {
  font-family: 'SimHei';
  font-size: 16px;
  font-weight: bold;
  line-height: 35px;
}

.limit-height {
  max-height: 600px;
  overflow-y: auto;
}
.btn-refresh {
  position: absolute;
  right: 50px;
}
.container-narrow {
  margin: 0 auto;
  max-width: 800px;
  height: max-content;
  background-color: #ffffff;
}
.row-in-grid-item {
  min-height: 28px;
  display: flex;
  align-items: center;
}
</style>